<template>
  <BtnGroup
    :title="`${configKey === 'titleWeight' ? '标题' : '描述'}粗细`"
    :status="status[currentStatus]"
  >
    <el-button-group class="">
      <el-button
        v-for="(item, index) in status"
        :class="{
          select: currentStatus === index,
        }"
        @click="changeWeight(index)"
      >
        <font-awesome-icon :icon="['fas', 'font']" :size="getFontSize(index)" />
      </el-button>
    </el-button-group>
  </BtnGroup>
</template>

<script setup lang="ts">
import BtnGroup from './components/BtnGroup.vue'
import type { VueComType } from '@/types'

const props = defineProps<{
  configKey: string
  id: string
  status: string[]
  currentStatus: number
  isShow: boolean
  editCom: VueComType
}>()
const updateStatus = inject('updateStatus') as Function
const getFontSize = (index: number) => {
  if (index === 0) return 'lg'
  if (index === 1) return null
}

const changeWeight = (index: number) => {
  updateStatus(props.configKey, index)
}
</script>

<style scoped></style>
